import React, { useEffect, useState } from 'react';
import { Button,message, Popconfirm,Table,Modal   } from 'antd';

import { ExclamationCircleOutlined } from '@ant-design/icons';

import type { ColumnsType } from 'antd/es/table';
import {getList,getDelete,} from '../apis/Administratorrole'
import '../assets/css/questions/questions.css';
const { confirm } = Modal;
const Index: React.FC = () => {
 
  // 删除
  const del = (record:any) => {
    console.log(record)
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: '确定要删除这条数据吗',
      onOk:async()=> {
        let res:any = await getDelete({id:record.id})
        console.log(res)
        if(res.errCode === 10000){
          message.success('删除成功')
          getData()
        }else{
          message.error(res.errMsg)
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  //修改
  const updata=(record:any)=>{
    return()=>{
      console.log(record);
      
    }
  }
  // 表格
  const columns: ColumnsType<any> = [
    {
      title: 'id',
      dataIndex: 'id',
      align:'center',
      key:'id'
    },{
      title: '登陆账号',
      dataIndex: 'name',
      align:'center',
      key:'name'
    },
    {
      title: '操作',
      dataIndex: 'id',
      align:'center',
      render: (_,record) => (<div>
        <Button type="primary" onClick={updata(record)}>修改</Button>
        <Button className='botton' type="primary" danger onClick={()=>del(record)}>删除</Button>
      </div>)
    },
  ];
  // 列表
  const [list,setList] = useState<any>([])
  const getData = async()=>{
    let res:any = await getList({}).catch(()=>{})
    console.log(res)
    if(res && res.errCode === 10000){
      setList(res.data.list)
    }
  }
  // 添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //调用
  useEffect(()=>{
    getData()
  },[])
  return (
    <div className="questions">
     <div className="header">
          <span className="title">公告列表</span>
      </div>
      <div className="top">
      </div>
      <div className="center">
        <Button type="primary" onClick={showModal}>添加</Button>
        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
      <div className="table">
        <Table rowKey="id"  columns={columns} dataSource={list} pagination={false} />
      </div>
    </div>
  );
};
export default Index;
